import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import * as d3 from 'd3';

@Component({
    selector: 'app-c-mindmap',
    templateUrl: './c-mindmap.component.html',
    styleUrls: ['./c-mindmap.component.less']
})
export class CMindmapComponent implements OnInit {
    @Output() dataChange = new EventEmitter<object>();
    @Output() onBlur = new EventEmitter<object>();

    @Input() width = 0;
    @Input() height = 0;
    @Input() canEdit;
    @Input() showtree = false;

    _text;
    @Input() data;
    treedata = [];
    imgpath = '';
    isOnline = true;
    set text(value) {
        this.data.text = value;
    }

    get text() {
        if (!this.data.text) {
            return '按钮名称';
        } else {
            return this.data.text;
        }
    }

    get tree_data() {
        //console.log(this.data.selectData);
        return this.data.selectData;
    }
    newMindMap() {
        let width =this.width*.9;
        let height = this.height*.9;
        //定义布局范围
        let treeWidth = width - 80;
        let treeHeight = height - 80;
//定义D3树布局范围
        let tree = d3.layout.tree()
            .size([treeHeight, treeWidth - 100])//注意D3布局跟svg坐标系无关,size(高，宽)
            .separation(function (a, b) {
                return (a.parent == b.parent ? 1 : 2);
            });//设置相隔节点的间距，a、b节点相隔

//定义连线生成器
        let diagonal = d3.svg.diagonal()
            .projection(function (d) {
                return [d.y, d.x];
            });//设置连线点的变换器

//绘制svg图形
        let svg = d3.select("body app-root div .scene-center .c-mindmap app-c-mindmap").append("svg")
            .attr("width", treeWidth)
            .attr("height", treeHeight)
            .append("g")
            .attr("transform", "translate(300,0)");//定义偏移量

        //加载数据
        let root = this.treedata[0];
        let nodes = tree.nodes(root);   //获取所有节点信息
        let links = tree.links(nodes);  //获取节点的连线信息集合

        //绘制连线
        let link = svg.selectAll(".link")
            .data(links)
            .enter()
            .append("path")
            .attr("class", "link")
            .attr("d", diagonal);
        console.log(link);
        //绘制节点
        let node = svg.selectAll(".node")
            .data(nodes)
            .enter()
            .append("g")
            .attr("class", "node")
            .attr("transform", function (d) {
                return "translate(" + d.y + "," + d.x + ")";
            })

        //添加节点图标
        node.append("circle")
            .attr("r", 4.5);

        //添加节点显示文本
        node.append("text")
            .attr("dx", function (d) {
                return d.children ? -8 : 8;
            })//定义文本显示x轴偏移量
            .attr("dy", 3)//定义文本显示y轴偏移量
            .style("text-anchor", function (d) {
                return d.children ? "end" : "start";
            })//文字对齐显示
            .text(function (d) {
                return d.name;
            });
    }
    constructor() {
    }

    ngOnInit() {
        //console.log(this.width)
        //console.log(this.height);
        let line = this.data.fillData.line;
        if(line == 'outline'){
            this.isOnline = false
        }

        if(!this.isOnline){
            this.showtree = true
            //sr.setAttribute('style','display:none')
            this.imgpath = this.data.fillData.fillImg
        }else{
            if(this.showtree){
                this.treedata = [];
                this.treedata = JSON.parse(this.tree_data);
                this.newMindMap()
            }
        }



    }

    blur() {
        this.onBlur.emit();
    }

}
